<script setup>
  import { defineProps } from "vue";
  const props = defineProps({
    time: {
      type: String,
      default: "23:01",
    },
    count: {
      type: String,
      default: "1.4k",
    },
    img: {
      type: String,
      default: "视频封面地址",
    },
    avator: {
      type: String,
      default: "上传者头像",
    },
    name: {
      type: String,
      default: "视频简要",
    },
    uploader: {
      type: String,
      default: "上传者",
    },
    upTime: {
      type: String,
      default: "上传时间",
    },
  });
</script>
<template>
  <div>
    <li>
      <router-link :to="{ path: '/video', query: { id: '123' } }">
        <a
          href="#"
          class="video-post"
        >
          <!-- Blog Post Thumbnail -->
          <div class="video-post-thumbnail">
            <span class="video-post-count">{{ count }}</span>
            <span class="video-post-time">{{ time }}</span>
            <span class="play-btn-trigger"></span>
            <!-- option menu -->
            <span class="btn-option">
              <i class="icon-feather-more-vertical"></i>
            </span>
            <div
              class="dropdown-option-nav"
              uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small"
            >
              <ul>
                <li @click.stop="handleWatchLater">
                  <span> <i class="uil-history"></i> Watch Later</span>
                </li>
                <li>
                  <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                </li>
                <li>
                  <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                </li>
              </ul>
            </div>

            <img
              v-img-lazy="img"
              alt=""
              uk-img
              uk-animation-fade
            />
          </div>

          <!-- Blog Post Content -->
          <div class="video-post-content">
            <h3>{{ name }}</h3>
            <img
              v-img-lazy="avator"
              alt=""
            />
            <span class="video-post-user">{{ uploader }}</span>
            <!-- <span class="video-post-views">531k views</span> -->
            <span class="video-post-date"> {{ upTime }} </span>
          </div>
        </a>
      </router-link>
    </li>
  </div>
</template>
